import React, { useState, useEffect } from 'react';
import { Pagination, Rate } from 'antd';
import { Link } from 'react-router-dom';
import Roll from '../../../components/Roll';
import Nav from '../../../components/Nav';
import './index.css';
import foodimg from '../../../static/img/food/cityfood2.png'
import Choiceness from '../../../components/Choiceness';
import axios from 'axios';
import { aUrl } from '../../../static/axios_url';
export default function Mycity() {
    const foodType = ['全部', '餐饮', '酒店', '休闲', '电影', '汽车装饰']
    const [cityFood, setcityFood] = useState([])
    //初始化排序数据
    const [countsort, setcountsort] = useState([])
    const [upOrdown, setupOrdown] = useState(true)
    useEffect(() => {
        document.getElementsByClassName('foodType')[0].getElementsByTagName('a')[0].className = 'check'
        document.getElementsByClassName('foodLisBtn')[0].getElementsByTagName('span')[0].className = 'check'
        axios.post(aUrl + '/mycityData', { city: '郑州', ye: 1 }).then((res) => {
            setcityFood(res.data)
            setcountsort(res.data);
        })
    }, [])
    function updown() {
        return () => {
            setupOrdown(!upOrdown)
        }
    }
    function typeCheck(num) {
        return () => {
            let a = document.getElementsByClassName('foodType')[0].getElementsByTagName('a')
            for (let i = 0; i < a.length; i++) {
                a[i].className = ''
            }
            a[num].className = 'check'
            var newData = []
            if (num) {
                cityFood.data.forEach((v) => {
                    if (v.s_type === num)
                        newData.push(v)
                });
                setcountsort({ ...countsort, data: newData })
            } else {
                setcountsort(cityFood)
            }
        }
    }
    function lxCheck(num) {
        return () => {
            let span = document.getElementsByClassName('foodLisBtn')[0].getElementsByTagName('span')
            for (let i = 0; i < span.length; i++) {
                span[i].className = ''
            }
            span[num].className = 'check'
            //销量排序
            if (num === 0) {
                const sortup = { ...countsort }
                sortup.data.sort((a, b) => {
                    return a.sales - b.sales
                })
                setcountsort(sortup)
            }
            //评价排序
            if (num === 2) {
                const sortup = { ...countsort }
                sortup.data.sort((a, b) => {
                    return b.start - a.start
                })
                setcountsort(sortup)
            }
        }
    }
    //价格排序
    function sortfition() {
        const sortup = { ...countsort }
        if (upOrdown === false) {
            sortup.data.sort((a, b) => {
                return b.per_capita - a.per_capita
            })
            setcountsort(sortup)
        } else {
            sortup.data.sort((a, b) => {
                return a.per_capita - b.per_capita
            })
            setcountsort(sortup)
        }
    }
    return (
        <div>
            <Nav num={2} />
            <div className="lunbo">
                <Roll />
            </div>
            <Choiceness />
            <div className="mycity">
                <div className="foodType">
                    <i>分类 : </i>
                    {foodType.map((foodType, i) => {
                        return <a href="###" key={i} onClick={typeCheck(i)}>{foodType}</a>
                    })}
                </div>
                <div className="foodLisBtn clear">
                    <div>
                        <span className="btn" onClick={lxCheck(0)}>销量</span>
                        <span className="btn" onClick={sortfition} onMouseUp={lxCheck(1)} onMouseDown={updown()}><strong>价格</strong> <i className="fa fa-caret-up up" id={!upOrdown ? '' : 'anthis'}></i><i className="fa fa-caret-down down" id={upOrdown ? '' : 'anthis'}></i></span>
                        <span className="btn" onClick={lxCheck(2)}>评价最高</span>
                    </div>
                </div>
                <ul className="foodLis">
                    {countsort?.data?.map((countsort, i) => {
                        return <li key={i}>
                            <img src={foodimg} alt="" />
                            <h4><Link to={'/merchant?' + countsort.s_id}>{countsort.name}</Link></h4>
                            <h5><Rate disabled value={countsort.start} /><span>{countsort.per_capita}/人均</span></h5>
                            <h6>{countsort.address}</h6>
                        </li>
                    })}
                </ul>
                <div className="peges">
                    <Pagination showQuickJumper defaultCurrent={1} total={countsort.length} pageSize={12} />
                </div>
            </div>
        </div>
    )
}
